<!DOCTYPE html>
<html>
<meta charset="utf-8">
<head th:include="include :: header"></head>
<body> 
<div class="wrapper wrapper-content "> 
	<div class="row">
		 <div class="col-sm-12">
		 	 <div class="ibox-content">
				 <div class="form-group" style="height:30px;">
					<div class="col-sm-2" style="width:105px;margin-top: 6px;text-align: right;">所属分类：</div>
					<div class="col-lg-6 col-sm-6 col-xs-6">
						 <select  id="groupId" name="groupId" class="form-control" title="类型"> </select>
			             <input id="groupIdValue" th:value="${info?.groupType}" type="hidden">
					</div> 
				</div>
		        <div class="form-group" style="border: 1px;background-color: #383939">
		
		            <div class="col-sm-7" style="border:1px;background-color: #383939;float:left;height: 80px;line-height: 80px;text-align: center;color: #ffffff;font-size: 30px">
		                	请选择识别的人脸的照片
		            </div> 
		             
	                <div class="col-sm-7" id="imageDivComp" style="background-image :url(../img/a1.jpg) ;  background-repeat: no-repeat;background-position: center center;background-size: cover;      /* 覆盖:图片成比例填满盒子。可用于适配 */
						background-size: contain; float:left;height: 500px;border: 1px solid #877dd6">
	                </div>
		       
		            <input type="file" name="file" id="chooseFileComp" onchange="chooseFileChangeComp()" style="display:none;"/>
		            <div id="showAns" class="col-sm-3" style="float:left;height: 40px;line-height: 40px;text-align: center;font-size: 20px;">
		                
		                <div id="nameDiv" style="border: 1px solid #877dd6;"></div>
		                <div id="similarDiv" style="border: 1px solid #877dd6;"></div>
		                <div id="ageDiv" style="border: 1px solid #877dd6;"></div>
		                <div id="genderDiv" style="border: 1px solid #877dd6;"></div>
		            </div> 
		        </div>
		     </div>
	    </div> 
   	</div> 
</div>
<div th:include="include::footer"></div>
<script> 
	$().ready(function() {
		$("#showAns").hide();
		selectedHtml("groupId", "1161827075006111746", $("#groupIdValue").val()); 
	});
    $("#imageDivComp").click(function () {
        $("#chooseFileComp").click(); 
    });
    function cleanFile(){
   	  	var file = $('#chooseFileComp')[0];
   	    if(file.outerHTML){
   	        file.outerHTML = file.outerHTML;
   	    }else{
   	        file.value = '';
   	    }
    }
  
    function chooseFileChangeComp() {
        var file = $("#chooseFileComp")[0].files[0];
        if (!file) {
        	layer.msg("请先选择有人脸的照片");
            return false;
        }
        var img=$("#imageDivComp");
        img.css("background-image", 'url(' + URL.createObjectURL(file) + ')');

        var formData = new FormData();
        var groupId = $("#groupId option:selected").val()
        if(!groupId){
       	  	layer.msg("请选择分组");
       	 	cleanFile();
            return;
		}
        formData.append("groupId",groupId)

        if (!file) {
        	layer.msg("未识别到文件，请重新选择照片"); 
            return;
        }
        formData.append("file", file);
        
        layer.load(0, {
    		  icon: 0,
  		  time: 1000,
  		  shade: [0.1,'#fff'] 
  		}, function(){
  		  //do something
  		});
        $.ajax({
            type: "post",
            url: "/face/faceSearch",
            data: formData,
            contentType: false,
            processData: false,
            async: false,
            success: function (text) {
            	cleanFile();
                var res = JSON.stringify(text)
                if (text.code == 0) {
                	$("#showAns").show();
                    var name = text.data.name;
                    $("#nameDiv").html("姓名：" + name);
                    var similar = text.data.similarValue;
                    $("#similarDiv").html("相似度：" + similar + "%");
                    var age = text.data.age;
                    $("#ageDiv").html("年龄：" + age);
                    var gender = text.data.gender;
                    $("#genderDiv").html("性别：" + gender);
                    img.css("background-image", 'url(' + text.data.image + ')');
                } else {
                	$("#showAns").hide();
                    $("#nameDiv").html("");
                    $("#similarDiv").html("");
                    $("#ageDiv").html("");
                    $("#genderDiv").html("");
                    layer.msg("未找到匹配人员")
                }

            },
            error: function (error) {
            	cleanFile();
                $("#nameDiv").html("");
                $("#similarDiv").html("");
                $("#ageDiv").html("");
                $("#genderDiv").html("");
                alert(JSON.stringify(error))
            } 
        }); 
    } 
</script>

 
</html>